<template>
  <a-card :bordered="false">
    <div>
      <a-row>
        <a-col :span="24">
          <!--url：指定表格加载时请求的后端接口地址-->
          <!--columns：指定表格列配置项数据-->
          <j-tree-table :columns="columns" :url="rootUrl" :tableProps="tableProps" :childrenUrl="childrenUrl" queryKey='parentCode'>
            <template slot="action" slot-scope="text">
              <!--注意：text.record才等同于原来的record-->
              <a @click="editUserMethod(text.record)">编辑</a>
            </template>
          </j-tree-table>
        </a-col>
      </a-row>

      <a-modal v-model="ShowModal" title="会员编辑" width="40%" >
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol"  :model="editUser">
          <a-form-model-item  label="名称:"><a-input  style="width: 200px" v-model="editUser.name" /></a-form-model-item>
          <a-form-model-item label="区域编码:"><a-input  style="width: 200px" v-model="editUser.code" disabled/></a-form-model-item>
          <a-form-model-item label="父编码:"><a-input  style="width: 200px" v-model="editUser.parentCode" disabled/></a-form-model-item>
          <a-form-model-item label="标识:">
                <span v-model="editUser.unit">
                  {{filterDictTextByCache('unit_type', editUser.unit)}}
                </span>
          </a-form-model-item>
          <a-form-model-item label="状态:"><a-input  style="width: 200px" v-model="editUser.status" disabled/>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </a-card>
</template>

<script>
  //定义引入的js插件
  import {getAction} from '@/api/manage'
  //异步树结构
  import JTreeTable from '@/components/jeecg/JTreeTable'
  export default {
    components: {JTreeTable},
    data() {
      return {
        ShowModal:false,
        editUser:{},
        labelCol: {span: 6},
        wrapperCol: {span: 16},
        /* 编辑弹窗回显绑定对象*/
        /* 表单校验规则*/
        // ===========================异步树表格需要属性========================
        //页面中所有请求后端接口的url
        rootUrl: '/njt-area/listRoot',//根节点请求路径
        childrenUrl: '/njt-area/listChildren',//子节点加载路径
        //异步树表格配置列数据
        columns: [
          {title: '名称', dataIndex: 'name'},
          {title: '区域编码', dataIndex: 'code'},
          {title: '父编码', dataIndex: 'parentCode'},
          //基于使用数组数据加载表格列方式的自定义渲染，借助插槽Slot
          //开发步骤：
          //1)在页面的表格标签中定义插槽内容（有固定的语言结构要求）
          //2)通过使用scopedSlots: { customRender: '插槽标识名' },
          {title:'标识',dataIndex:'unit',
            customRender:(text) =>{
              if (text ===-1){
                return  '省'
              }else if(text ===0){
                return '市'
              }else if(text ===1){
                return '区'
              }
            }
          },
          {title:'状态',dataIndex:'status',
            customRender:(text) =>{
              if (text ===1){
                return  '正常'
              }else if(text ===0){
                return '不正常'
              }
            }},
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        selectedRowKeys: []
      }
    },
    methods: {
      //表格自带分页条内容切换时触发事件
      openUpdateModal(record) {
        //将事件传入的表格行对象，浅拷贝赋值给弹窗回显对象
        this.updateForm = Object.assign({}, record)
        this.updateVisible = true;
      },
      filterDictTextByCache(dictCode, key) {
        if(key==null ||key.length==0){
          return;
        }
        if (!dictCode) {
          return '字典Code不能为空!';
        }
        //优先从缓存中读取字典配置
        if(getDictItemsFromCache(dictCode)){
          let item = getDictItemsFromCache(dictCode).filter(t => t["value"] == key)
          if(item && item.length>0){
            return item[0]["text"]
          }
        }
      }

    },
    computed: {
      tableProps() {
        let _this = this
        return {
          // 列表项是否可选择
          // 配置项见：https://vue.ant.design/components/table-cn/#rowSelection
          rowSelection: {
            selectedRowKeys: _this.selectedRowKeys,
            onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
          }
        }
      }
    }
  }
</script>
<style>

</style>